
/* ===============固定长高=============== */
.w100{width: 100%}
.w50{width: 50%}
.h100{height: 100%}
.h50{height: 50%}

.p0{padding: 0px;}
.p5{padding: 5px;}
.p10{padding: 10px;}
.p15{padding: 15px;}
.p20{padding: 20px;}

.pt0{padding-top: 0px;}
.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}

.pb0{padding-bottom: 0px;}
.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}

.pl0{padding-left: 0px;}
.pl5{padding-left: 5px;}
.pl10{padding-left: 10px;}
.pl15{padding-left: 15px;}
.pl20{padding-left: 20px;}

.pr0{padding-right: 0px;}
.pr5{padding-right: 5px;}
.pr10{padding-right: 10px;}
.pr15{padding-right: 15px;}
.pr20{padding-right: 20px;}

.m0{margin: 0px;}
.m5{margin: 5px;}
.m10{margin: 10px;}
.m15{margin: 15px;}
.m20{margin: 20px;}

.mt0{margin-top: 0px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}

.mb0{margin-bottom: 0px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}

.ml0{margin-left: 0px;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}

.mr0{margin-right: 0px;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}

.rel{position: relative;}
.abs{position: absolute;}
.flx{position: fixed;}

.t0{top: 0;}
.b0{bottom: 0;}
.r0{right: 0;}
.l0{left: 0;}


.img-fill{object-fit:fill;}
.img-contain{object-fit:contain;}
.img-cover{object-fit:cover;}
.img-none{object-fit:none;}
.img-scale{object-fit:scale-down;}


.f10{font-size:10px;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f22{font-size:22px;}
.f24{font-size:24px;}
.f26{font-size:26px;}
.f28{font-size:28px;}
.f30{font-size:30px;}



/* ===============滚动=============== */
.scroll{overflow-y: auto;-webkit-overflow-scrolling:touch;}
.center{text-align: center;}
.round{border-radius: 5px;}
.round50{border-radius:50px;}
.round100{border-radius:100%;}
.overhidden{overflow: hidden;}
.auto{margin: auto;}



/* ========================================layout================================== */
/* flex */
.f{display: -ms-flexbox !important;display: flex !important;}
.f-row{-ms-flex-direction: row !important;flex-direction: row !important;}
.f-col{-ms-flex-direction: column !important;flex-direction: column !important;}

.f-nowrap{-ms-flex-wrap: nowrap !important;flex-wrap: nowrap !important;}
.f-wrap{flex-wrap:wrap !important;-ms-flex-wrap: wrap !important;flex-wrap: wrap !important;}


.j-c{-ms-flex-pack: center !important;justify-content: center !important;}
.j-e{-ms-flex-pack: end !important;justify-content: flex-end !important;}
.j-s{-ms-flex-pack: start !important;justify-content: flex-start !important;}
.j-a{-ms-flex-pack: distribute !important;justify-content: space-around !important;}
.j-b{-ms-flex-pack: justify !important;justify-content: space-between !important;}

.a-s{-ms-flex-align: start !important;align-items: flex-start !important;}
.a-e{-ms-flex-align: end !important;align-items: flex-end !important;}
.a-c{-ms-flex-align: center !important;align-items: center !important;}
.a-b{-ms-flex-align: baseline !important;align-items: baseline !important;}

.a-c-s{-ms-flex-line-pack: start !important;align-content: flex-start !important;}
.a-c-e{-ms-flex-line-pack: end !important;align-content: flex-end !important;}
.a-c-c{-ms-flex-line-pack: center !important;align-content: center !important;}
.a-c-b{-ms-flex-line-pack: justify !important;align-content: space-between !important;}
.a-c-a{-ms-flex-line-pack: distribute !important;align-content: space-around !important;}


.f-0-1-box>*{flex-grow: 0;flex-shrink: 1;}/*默认值*/
.f-1-1-box>*{flex-grow: 1;flex-shrink: 1;}/*等分延伸不收缩*/
.f-0-0-box>*{flex-grow: 0;flex-shrink: 0;}/*不延伸等份收缩 */
.f-1-0-box>*{flex-grow: 1;flex-shrink: 1;}/*等份延伸等份收缩 */

.f-0-1{flex-grow: 0;flex-shrink: 1;}/*默认值*/
.f-1-1{flex-grow: 1;flex-shrink: 1;}/*等分延伸不收缩*/
.f-0-0{flex-grow: 0;flex-shrink: 0;}/*不延伸等份收缩 */
.f-1-0{flex-grow: 1;flex-shrink: 1;}/*等份延伸等份收缩 */

.f-g-0-box>*{flex-grow: 0;} /*默认值*/
.f-g-1-box>*{flex-grow: 1;} /*等份延伸*/
.f-g-2-box>*{flex-grow: 2;} /*倍数延伸*/

.f-g-0{flex-grow: 0;} /*默认值*/
.f-g-1{flex-grow: 1;} /*等份延伸*/
.f-g-2{flex-grow: 2;} /*倍数延伸*/

.f-s-0-box>*{flex-shrink: 0;}/*默认值*/
.f-s-1-box>*{flex-shrink: 1;}/*等份收缩*/

.f-s-0{flex-shrink: 0;}/*等份收缩*/
.f-s-1{flex-shrink: 1;}/*默认值*/


/* float */
.float-right{float: right;}
.float-left{float: left;}
.float-none{float: none;}
.clearfix::after {content: "";display: table;clear: both;}
.clear-left{clear: left;}
.clear-right{clear: right;}
.clear-both{clear: both;}
.clear-none{clear: none;}


/* Gard */
/* Grid Template Columns */
.grid-flow-row{grid-auto-flow: row;}
.grid-flow-col{grid-auto-flow: column;}
.grid-flow-row-dense{grid-auto-flow: row dense;}
.grid-flow-col-dense{grid-auto-flow: column dense;}

/* Grid Column Start / End */
.col-auto{grid-column: auto;}
.col-span-1{grid-column: span 1 / span 1;}
.col-span-2{grid-column: span 2 / span 2;}
.col-span-3{grid-column: span 3 / span 3;}
.col-span-4{grid-column: span 4 / span 4;}
.col-span-5{grid-column: span 5 / span 5;}
.col-span-6{grid-column: span 6 / span 6;}
.col-span-7{grid-column: span 7 / span 7;}
.col-span-8{grid-column: span 8 / span 8;}
.col-span-9{grid-column: span 9 / span 9;}
.col-span-10{grid-column: span 10 / span 10;}
.col-span-11{grid-column: span 11 / span 11;}
.col-span-12{grid-column: span 12 / span 12;}
.col-start-1{grid-column-start: 1;}
.col-start-2{grid-column-start: 2;}
.col-start-3{grid-column-start: 3;}
.col-start-4{grid-column-start: 4;}
.col-start-5{grid-column-start: 5;}
.col-start-6{grid-column-start: 6;}
.col-start-7{grid-column-start: 7;}
.col-start-8{grid-column-start: 8;}
.col-start-9{grid-column-start: 9;}
.col-start-10{grid-column-start: 10;}
.col-start-11{grid-column-start: 11;}
.col-start-12{grid-column-start: 12;}
.col-start-13{grid-column-start: 13;}
.col-start-auto{grid-column-start: auto;}
.col-end-1{grid-column-end: 1;}
.col-end-2{grid-column-end: 2;}
.col-end-3{grid-column-end: 3;}
.col-end-4{grid-column-end: 4;}
.col-end-5{grid-column-end: 5;}
.col-end-6{grid-column-end: 6;}
.col-end-7{grid-column-end: 7;}
.col-end-8{grid-column-end: 8;}
.col-end-9{grid-column-end: 9;}
.col-end-10{grid-column-end: 10;}
.col-end-11{grid-column-end: 11;}
.col-end-12{grid-column-end: 12;}
.col-end-13{grid-column-end: 13;}
.col-end-auto{grid-column-end: auto;}


/* Grid Template Rows */
.grid-rows-1{grid-template-rows: repeat(1, minmax(0, 1fr));}
.grid-rows-2{grid-template-rows: repeat(2, minmax(0, 1fr));}
.grid-rows-3{grid-template-rows: repeat(3, minmax(0, 1fr));}
.grid-rows-4{grid-template-rows: repeat(4, minmax(0, 1fr));}
.grid-rows-5{grid-template-rows: repeat(5, minmax(0, 1fr));}
.grid-rows-6{grid-template-rows: repeat(6, minmax(0, 1fr));}
.grid-rows-none{grid-template-rows: none;}


/* Grid Row Start / End */
.row-auto{grid-row: auto;}
.row-span-1{grid-row: span 1 / span 1;}
.row-span-2{grid-row: span 2 / span 2;}
.row-span-3{grid-row: span 3 / span 3;}
.row-span-4{grid-row: span 4 / span 4;}
.row-span-5{grid-row: span 5 / span 5;}
.row-span-6{grid-row: span 6 / span 6;}
.row-start-1{grid-row-start: 1;}
.row-start-2{grid-row-start: 2;}
.row-start-3{grid-row-start: 3;}
.row-start-4{grid-row-start: 4;}
.row-start-5{grid-row-start: 5;}
.row-start-6{grid-row-start: 6;}
.row-start-7{grid-row-start: 7;}
.row-start-auto{grid-row-start: auto;}
.row-end-1{grid-row-end: 1;}
.row-end-2{grid-row-end: 2;}
.row-end-3{grid-row-end: 3;}
.row-end-4{grid-row-end: 4;}
.row-end-5{grid-row-end: 5;}
.row-end-6{grid-row-end: 6;}
.row-end-7{grid-row-end: 7;}
.row-end-auto{grid-row-end: auto;}


/* Gap */
.gap-0{gap: 0;}
.gap-1{gap: 0.25rem;}
.gap-2{gap: 0.5rem;}
.gap-3{gap: 0.75rem;}
.gap-4{gap: 1rem;}
.gap-5{gap: 1.25rem;}
.gap-6{gap: 1.5rem;}
.gap-8{gap: 2rem;}
.gap-10{gap: 2.5rem;}
.gap-12{gap: 3rem;}
.gap-16{gap: 4rem;}
.gap-20{gap: 5rem;}
.gap-24{gap: 6rem;}
.gap-32{gap: 8rem;}
.gap-40{gap: 10rem;}
.gap-48{gap: 12rem;}
.gap-56{gap: 14rem;}
.gap-64{gap: 16rem;}
.gap-px{gap: 1px;}
.row-gap-0{row-gap: 0;}
.row-gap-1{row-gap: 0.25rem;}
.row-gap-2{row-gap: 0.5rem;}
.row-gap-3{row-gap: 0.75rem;}
.row-gap-4{row-gap: 1rem;}
.row-gap-5{row-gap: 1.25rem;}
.row-gap-6{row-gap: 1.5rem;}
.row-gap-8{row-gap: 2rem;}
.row-gap-10{row-gap: 2.5rem;}
.row-gap-12{row-gap: 3rem;}
.row-gap-16{row-gap: 4rem;}
.row-gap-20{row-gap: 5rem;}
.row-gap-24{row-gap: 6rem;}
.row-gap-32{row-gap: 8rem;}
.row-gap-40{row-gap: 10rem;}
.row-gap-48{row-gap: 12rem;}
.row-gap-56{row-gap: 14rem;}
.row-gap-64{row-gap: 16rem;}
.row-gap-px{row-gap: 1px;}
.col-gap-0{column-gap: 0;}
.col-gap-1{column-gap: 0.25rem;}
.col-gap-2{column-gap: 0.5rem;}
.col-gap-3{column-gap: 0.75rem;}
.col-gap-4{column-gap: 1rem;}
.col-gap-5{column-gap: 1.25rem;}
.col-gap-6{column-gap: 1.5rem;}
.col-gap-8{column-gap: 2rem;}
.col-gap-10{column-gap: 2.5rem;}
.col-gap-12{column-gap: 3rem;}
.col-gap-16{column-gap: 4rem;}
.col-gap-20{column-gap: 5rem;}
.col-gap-24{column-gap: 6rem;}
.col-gap-32{column-gap: 8rem;}
.col-gap-40{column-gap: 10rem;}
.col-gap-48{column-gap: 12rem;}
.col-gap-56{column-gap: 14rem;}
.col-gap-64{column-gap: 16rem;}
.col-gap-px{column-gap: 1px;}



/* Grid Auto Flow */
.grid-cols-1{grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-cols-2{grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-cols-3{grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-cols-4{grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid-cols-5{grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid-cols-6{grid-template-columns: repeat(6, minmax(0, 1fr));}
.grid-cols-7{grid-template-columns: repeat(7, minmax(0, 1fr));}
.grid-cols-8{grid-template-columns: repeat(8, minmax(0, 1fr));}
.grid-cols-9{grid-template-columns: repeat(9, minmax(0, 1fr));}
.grid-cols-10{grid-template-columns: repeat(10, minmax(0, 1fr));}
.grid-cols-11{grid-template-columns: repeat(11, minmax(0, 1fr));}
.grid-cols-12{grid-template-columns: repeat(12, minmax(0, 1fr));}
.grid-cols-none{grid-template-columns: none;}



/*table*/
.table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent}
.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}
.table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}
.table tbody+tbody{border-top:2px solid #dee2e6}
.table .table{background-color:#fff}
